<!--待办列表  这个应该是父组件  有其他组件来调用它 -->
<template>
    <div >
        <div v-for="item in data" :key="item.name" >
            <!--从服务端获取的数据-->
            <div style="margin-bottom:5px;">
                <div class="task-title">
                    <el-row>
                        <el-col :span="22">
                            <div :class="item.type == 1?'task-color1':item.type == 2?'task-color2':'task-color3'">
                            </div>
                            <div class="task-container">
                                <!--标题-->
                                <div  class="flow-title" >
                                    <span @click="gotoDetails(item)"  >{{item.folio}}</span>
                                </div>
            
                                <div class="task-operate">
                                    <span class="font-over task-fun" @click="gotoDetails(item)" ><img src="@/assets/img/details.png" /> {{$t('ndt.details')}}</span>
                                    <span class="font-over task-fun" @click="gotoLogs(item)" ><img src="@/assets/img/log.png" /> {{$t('ndt.log')}}</span>
                                    <span class="font-over task-fun" @click="gotoFiles" ><img src="@/assets/img/file.png" /> {{$t('ndt.file')}}</span>
                                    <span class="font-over task-fun"><img src="@/assets/img/forward.png" /> {{$t('ndt.send')}}</span>
                                    <span class="font-over task-span" >|</span>
                                    <!--上一审批人-->
                                    <span>{{$t('ndt.last_approve_man')}}:{{item.lastApproveMan}}</span>
                                    <!-- 审批意见 -->
                                    <span>{{$t('ndt.approve_suggest')}}: {{item.lastApproveSuggest}}</span>
                                    <!-- 审批时间 -->
                                    <span>{{$t('ndt.approve_time')}}:{{item.lastApproveTime}}  </span>
                                    <span>
                                        <!--展示内容-->
                                        <el-popover placement="top-start" key="item.pscId" width="600" trigger="hover" class="flowLog"   >
                                            <el-button slot="reference"  size="small" class="btn-second btn-popover btn-proc-open"  >
                                                <i style="position:relative;font-size:12px;" class="el-icon-arrow-down"></i>
                                            </el-button>    
                                                
                                            <el-row class="table-body">
                                                <el-table :data="item.showProcLogs"  class="no_line" fixed  ref="flowLogTable" >
                                                    <el-table-column prop="actName" :label="$t('ndt.actor_name')" ></el-table-column>
                                                    <el-table-column  :label="$t('ndt.deal_man')" >
                                                        <template slot-scope="scope"  >
                                                            {{ '['+scope.row.approverAccount+']' + scope.row.approverChsName}}
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column :formatter="transDate" prop="finishDate" :label="$t('ndt.deal_time')" ></el-table-column>
                                                    <el-table-column prop="comment" :label="$t('ndt.deal_suggest')" ></el-table-column>
                                                </el-table>
                                            </el-row>
                                        </el-popover>
                                    </span>
                                </div>
                            </div>
                        </el-col>

                        <el-col :span="2">
                            <div  @click="hasRead(item)" style="height:60px;margin-top:6px;border-left: 1px solid #F1E3D2;text-align: center;">
                                <el-button size="small" class="btn-default" style="top:25%;position: relative;;cursor: default;display: inline-block;"  >{{$t('ndt.hasRead')}}</el-button>
                            </div>
                            <!-- <div v-if="item.iconDown" @click="showDetails(item)" style="height:60px;margin-top:6px;border-left: 1px solid #F1E3D2;text-align: center;">
                                <i  class="el-icon-arrow-down"   style="top:35%;position: relative;;cursor: default;display: inline-block;" ></i>
                            </div>

                            <div v-else @click="showDetails(item)" style="height:60px;margin-top:6px;border-left: 1px solid #F1E3D2;text-align: center;">
                                <i  class="el-icon-arrow-up"   style="top:35%;position: relative;;cursor: default;display: inline-block;" ></i>
                            </div> -->
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <div id="load" style="height:100px"></div>
        
    </div>
</template>
    
<script>

import need_read_list from './js/need_read_list.js'
export default need_read_list
</script>
    
    
<style  scoped>
    .form-item1>.el-form-item__label{
        padding-right:0px !important;
    }
    .task-title{
        margin-left:15px;
        margin-right:15px;height:70px;
        border-top: 1px solid #e7ddce;
        border-bottom: 1px solid #e7ddce;
    }
    .task-title:hover{
        background-color: #fffef6;
    }
    .task-color1{
        width:5px;background-color:#EE7200;height:70px; float:left;
    }
    .task-color2{
        width:5px;background-color:#ffd900;height:70px; float:left;
    }
    .task-color3{
        width:5px;background-color:#8fc31f;height:70px; float:left;
    }
    .task-container{
        margin-left:10px;float:left;
    }
    .font-over:hover{
        color:#0069ac;
    } 
    .btn-popover.btn-second > .el-icon-arrow-down{
        position:relative;
        right: 7px;
        bottom:5px;
    }
    .flow-title{
        cursor:default;margin-top:12px;font-size: 16px;font-weight: bold;letter-spacing: 1px;
    }
    .flow-title:hover{
        color:#0069ac;
    }
    .task-operate{
        color:#9f988d;margin-top:12px;
    }
    .task-fun{
        cursor:default;margin-left:5px;margin-right:5px;
    }
    .task-span{
        margin-left:30px;margin-right:35px;
    }
    .btn-proc-open{
        width: 15px;height:15px; position: relative;top:0;padding:0;
    }
    .flow_approve span:hover{
        background-color:#f1f1f1;
    }
    /* .flowLog .btn-popover .el-icon-arrow-down:hover{
        background-color:#0069ac;
    }  */

</style>